<script lang="ts" setup>
import { provide, ref } from 'vue';
import HmButton from './components/HmButton.vue';
import SonCom from './components/SonCom.vue'

// 父组件传递回调函数给子组件，子组件触发回调函数
const myEvent = (age:number) => {
  console.log('子组件触发回调函数',age);
}

const myName = (name:string) =>{
 console.log('子组件触发回调函数',name);
}

// 父组件通过provide向子组件传递数据
const totalCount = ref(100);
// 1. provide 函数类似鸿蒙的 @Provide 装饰器，祖先提供数据
provide('totalCount',totalCount);

provide('updateTotalCount',(num:number)=>{
  totalCount.value += num
})

</script>

<template>
  <!-- 
   总结：
   父传子：通过·v-bind：·和·props·传递数据
   子传父：通过·V-on：·和·emits·传递数据（传回调函数给子组件调用）
  -->
   
  <h1 class="title">我是根组件</h1>
  <h1>根组件 totalCount：{{ totalCount }}</h1>
  <button @click="totalCount++">数据+1</button>
   <!-- 父传子，name 和 age 为必须参数 -->
   <SonCom :name="'拉布拉多'" :age="2" @my-event="myEvent($event)" @my-name="myName($event)"/>
   <SonCom :name="'萨摩耶'" :age="3" @my-event="myEvent" @my-name="myName"/>
    <!-- 父传子，text 为可选参数 -->
   <HmButton :text="'登录'" />
   <HmButton :text="'注册'" />
   <HmButton />
</template>

<style scoped>
.title{
  color: yellowgreen;
}
</style>